<template>
  <div class="homePage2">
    <div class="sysId2">
      <div class="title flexcenter">
        <h3>{{ title }}工作台</h3>
      </div>
      <div class="main flex m-t-20">
        <div class="htop flex1">
          <div class="ttop">
            <ul class="flex flexjcsa flexac m-l-20 co-ul">
              <li class="li1">
                <h3>备案电梯</h3>
                <div class="flex tstate">
                  <div class="state flex flexdc">
                    <CountTo class="number number1" :start-val="0" :end-val="state0.length" :duration="3200" />
                    <span class="span span1">未绑定</span>
                  </div>
                  <div class="state flex flexdc">
                    <CountTo class="number number2" :start-val="0" :end-val="state1.length" :duration="3200" />
                    <span class="span span2">已录入</span>
                  </div>
                  <div class="state flex flexdc">
                    <CountTo class="number number3" :start-val="0" :end-val="state2.length" :duration="3200" />
                    <span class="span span3">已申请</span>
                  </div>
                  <div class="state flex flexdc">
                    <CountTo class="number number4" :start-val="0" :end-val="state3.length" :duration="3200" />
                    <span class="span span4">已绑定</span>
                  </div>
                  <!-- <div class="state flex flexdc">
                    <CountTo class="number number5" :start-val="0" :end-val="state4.length" :duration="3200" />
                    <span class="span span5">已拒绝</span>
                  </div>
                  <div class="state flex flexdc">
                    <CountTo class="number number6" :start-val="0" :end-val="state5.length" :duration="3200" />
                    <span class="span span6">未确认</span>
                  </div> -->
                </div>
              </li>
              <li class="li2">
                <h3>维保人员</h3>
                <div class="flex person">
                  <div class="people flex flexdc">
                    <CountTo class="pnumber c-p" :start-val="0" :end-val="peopleNumber" :duration="3200" />
                    <span class="pcount pu">总人数</span>
                  </div>
                  <div class="purch flex flexdc">
                    <CountTo class="punumber c-p" :start-val="0" :end-val="purchaseNumber.length" :duration="3200" />
                    <span class="putitle pu">已购买保险数</span>
                  </div>
                </div>
              </li>
              <li class="li3">
                <h3>使用单位</h3>
                <div class="flex units person">
                  <div class="total flex flexdc">
                    <CountTo class="tnumber c-p" :start-val="0" :end-val="totalUnits" :duration="3200" />
                    <span class="tcount pu">总单位数</span>
                  </div>
                  <div class="social flex flexdc">
                    <CountTo class="sunumber c-p" :start-val="0" :end-val="socialCredit.length" :duration="3200" />
                    <span class="stitle pu">有统一社会信用代码</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="tbottom flex">
            <div class="tbleft flex1 m-r-20">
              <h3>待办事项</h3>
              <ul class="tbl flex flexdc">
                <li v-for="(item, i) in elevatorList" :key="i" class="flex flexac">
                  <div class="ltitle">
                    <span>电梯{{ i + 1 }}：</span>
                    <span>注册代码：{{ item.registerCode }}</span>
                  </div>
                  <span v-if="item.bindState === 0" class="bstate" @click="handleToBind">
                    待录入
                  </span>
                  <span v-if="item.bindState === 1" class="bstate" @click="handleToApply">
                    待申请
                  </span>
                  <span v-if="item.bindState === 4" class="bstate" @click="handleToApply">
                    待申请
                  </span>
                  <span v-if="item.bindState === 5" class="bstate">
                    待确认
                  </span>
                </li>
              </ul>
            </div>
            <div class="tbright">
              <h3>证书情况</h3>
              <el-image class="img" lazy fit="fill" :src="url" />
            </div>
          </div>
        </div>
        <div class="echarts m-l-30">
          <!-- <h3>备案完成进度</h3> -->
          <ul class="co-ul m-r-20">
            <li id="elevators" />
            <li id="personnel" />
            <!-- <li>3</li> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import echarts from 'echarts'
import CountTo from 'vue-count-to'
import { elevatorQueryList } from '@/api/elevator/elevator'
import { useUnitQueryList } from '@/api/elevator/elevatoruseunit'
import { maStaffList } from '@/api/maintenance/maintenance'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'SysId2',
  components: { CountTo },
  data() {
    return {
      title: '',
      url: require('@/assets/maintenance/bazs.png'),
      elevators: null,
      personnel: null,
      state0: [],
      state1: [],
      state2: [],
      state3: [],
      state4: [],
      state5: [],
      peopleNumber: 0,
      purchaseNumber: [],
      totalUnits: 0,
      socialCredit: [],
      elevatorList: [],
      param: {
        bindState: '',
        id: '',
        maintenanceUnitId: '',
        registerCode: '',
        registerUnit: '',
        rescueCode: '',
        useUnitId: '',
        isMaintenancePerson: '',
        name: ''
      },
      newArr1: [],
      paging: {
        pageIndex: 1,
        pageSize: 100
      }
    }
  },
  created() {
    this.systems = JSON.parse(this.$storage.get('systems'))
    this.sId = JSON.parse(this.$storage.get('id'))
  },
  mounted() {
    this.getSysTitle()
    this.getDrawLine()
    this.getPersonnel()
    this.getUnitQueryList()
  },
  methods: {
    handleToBind() {
      this.$router.push({ path: '/bindSelect' })
    },
    handleToApply() {
      this.$router.push({ path: '/eleApplyrecord' })
    },
    getSysTitle() {
      this.systems.filter(item => {
        if (item.id === this.sId) {
          this.title = item.name
          return this.title
        }
      })
    },
    // 使用单位
    getUnitQueryList() {
      useUnitQueryList(this.param.id, this.param.name, this.paging.pageIndex, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.totalUnits = res.pager.totalSize
          this.socialCredit = res.data.filter(item => {
            if (item.socialCreditCode !== '') {
              return item
            }
          })
        }
      })
    },
    // 电梯备案比例 / 备案电梯
    getDrawLine() {
      elevatorQueryList(
        this.param.bindState,
        this.param.id,
        this.param.maintenanceUnitId,
        this.paging.pageIndex,
        this.paging.pageSize,
        this.param.registerCode,
        this.param.registerUnit,
        this.param.rescueCode,
        this.param.useUnitId
      ).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.elevatorList = res.data.filter(item => {
            if (item.bindState !== 2 && item.bindState !== 3) {
              // console.log(item)
              return item
            }
          })
          this.state0 = res.data.filter(item => {
            if (item.bindState === 0) {
              return item
            }
          })
          this.state1 = res.data.filter(item => {
            if (item.bindState === 1) {
              return item
            }
          })
          this.state2 = res.data.filter(item => {
            if (item.bindState === 2) {
              return item
            }
          })
          this.state3 = res.data.filter(item => {
            if (item.bindState === 3) {
              return item
            }
          })
          this.state4 = res.data.filter(item => {
            if (item.bindState === 4) {
              return item
            }
          })
          this.state5 = res.data.filter(item => {
            if (item.bindState === 5) {
              return item
            }
          })
          // this.name = res.data.map(item => {
          //   const items = item.bindState === 0 ? '未绑定'
          //     : item.bindState === 1 ? '已录入'
          //       : item.bindState === 2 ? '已申请'
          //         : item.bindState === 3 ? '已绑定'
          //           : item.bindState === 4 ? '已拒绝' : '未确认'
          //   return items
          // })
          // console.log(this.name)
          this.data22 = res.data.map(item => {
            const id = item.bindState === 0 ? this.state0.length
              : item.bindState === 1 ? this.state1.length
                : item.bindState === 2 ? this.state2.length
                  : item.bindState === 3 ? this.state3.length
                    : item.bindState === 4 ? this.state4.length : this.state5.length

            const name = item.bindState === 0 ? '未绑定'
              : item.bindState === 1 ? '已录入'
                : item.bindState === 2 ? '已申请'
                  : item.bindState === 3 ? '已绑定'
                    : item.bindState === 4 ? '已拒绝' : '未确认'

            const params = {
              value: id,
              name: name
            }
            return params
          })

          // 调用
          const newArr = this.unique(this.data22)
          // console.log(newArr)
          this.elevators = echarts.init(document.getElementById('elevators'))
          this.elevators.setOption({
            title: { text: '电梯备案比例', top: 10, left: 10 },
            tooltip: {},
            legend: {
              orient: 'vertical',
              right: 10,
              top: 30,
              data: newArr
            },
            color: ['green', 'mediumslateblue', 'pink', 'orange', 'darkgoldenrod', 'blue', 'indigo', 'purple', 'salmon', 'mediumorchid'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                top: 30,
                left: -100,
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                // label: {
                //   show: false,
                //   position: 'center'
                // },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                // labelLine: {
                //   show: false
                // },
                data: newArr
              }
            ]
          })
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    unique(arr) {
      return [...new Set(arr.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
    },
    // 维保人员比例 / 维保人员
    getPersonnel() {
      maStaffList(
        this.param.id,
        this.param.isMaintenancePerson,
        this.param.name,
        this.paging.pageIndex,
        this.paging.pageSize
      ).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.peopleNumber = res.data.length
          this.purchaseNumber = res.data.filter(item => {
            if (item.isPurchaseInsurance === true) {
              return item
            }
          })
          this.names = res.data.map(item => item.name)

          for (var i = 0; i < this.names.length; i++) {
            if (this.names.indexOf(this.names[i]) === i) {
              var num = 1
              for (var j = i + 1; j < this.names.length; j++) {
                if (this.names[i] === this.names[j]) {
                  num++
                }
              }
              this.newArr1.push(
                {
                  value: num,
                  name: this.names[i]
                }
              )
            }
          }
          // console.log(this.newArr1)
          this.personnel = echarts.init(document.getElementById('personnel'))
          this.personnel.setOption({
            title: { text: '维保人员比例', top: 10, left: 10 },
            tooltip: {},
            legend: {
              orient: 'vertical',
              right: 10,
              top: 30,
              data: this.newArr1
            },
            color: ['green', 'mediumslateblue', 'pink', 'orange', 'darkgoldenrod', 'blue', 'indigo', 'purple', 'salmon', 'mediumorchid'],
            series: [
              {
                name: '访问来源',
                type: 'pie',
                top: 30,
                left: -100,
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                // label: {
                //   show: false,
                //   position: 'center'
                // },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                // labelLine: {
                //   show: false
                // },
                data: this.newArr1
              }
            ]
          })
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.homePage2 {
  .sysId2 {
    .title {
      // background: #eeeeee;
      h3 {
        font-size: 30px;
        margin: 15px 0;
      }
    }
    .main {
      .htop {
        height: 200px;
        .ttop {
          width: 100%;
          height: 240px;
          ul {
            li {
              height: 200px;
              margin: 0 20px 0 0;
              h3 {
                height: 60px;
                padding: 0 0 0 10px;
                color: #ffffff;
              }
              .tstate {
                .state {
                  width: 100%;
                  span {
                    text-align: center;
                  }
                  // .span1, .number1 { color: red; }
                  // .span2, .number2 { color: darkgoldenrod; }
                  // .span3, .number3 { color: blue; }
                  // .span4, .number4 { color: darkgreen; }
                  // .span5, .number5 { color: red; }
                  // .span6, .number6 { color: dimgray; }
                  .number {
                    font-size: 40px;
                    font-weight: 700;
                  }
                  .span, .number {
                    color: #ffffff;
                  }
                  .span {
                    margin-top: 15px;
                    font-size: 16px;
                    font-weight: 700;
                  }
                }
              }
              .person {
                text-align: center;
                .c-p {
                  font-size: 40px;
                  font-weight: 700;
                }
                .pu {
                  margin-top: 15px;
                  font-size: 16px;
                  font-weight: 700;
                }
                .people {
                  width: 50%;
                  color: #ffffff;
                  .pnumber {
                    font-size: 40px;
                  }
                  .pcount {}
                }
                .purch {
                  flex: 1;
                  color: #ffffff;
                  .punumber {
                    font-size: 40px;
                  }
                  .putitle {}
                }
              }
              .units {
                justify-content: space-around;
                .social, .total {
                  color: #ffffff;
                }
              }
            }
            .li1 {
              background: url('~@/assets/platform/1_03.png') no-repeat;
              background-size: 100% 100%;
            }
            .li2 {
              background: url('~@/assets/platform/1_15.png') no-repeat;
              background-size: 100% 100%;
            }
            .li3 {
              background: url('~@/assets/platform/1_08.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .tbottom {
          margin: 0 20px;
          .tbleft {
            height: 490px;
            border-radius: 5px;
            h3 {
              margin: 15px 0 15px 10px;
            }
            ul {
              margin: 0 10px;
              overflow: auto;
              // border-top: 1px solid #eeeeee;
              li {
                height: 50px;
                border-bottom: 1px solid #eeeeee;
                span {
                  line-height: 40px;
                }
                .ltitle {
                  flex: 1;
                }
                .bstate {
                  width: 70px;
                  height: 40px;
                  cursor: pointer;
                  text-align: center;
                  background: cornflowerblue;
                  border-radius: 5px;
                  // border: 1px solid #eeeeee;
                }
              }
            }
          }
          .tbright {
            width: 360px;
            border-radius: 5px;
            .img {
              width: 100%;
              height: 420px;
            }
          }
        }
      }
      .echarts {
        width: 38%;
        height: 100%;
        h3 {
          margin: 0 0 10px 0;
        }
        ul {
          li {
            height: 350px;
            margin: 0 0 20px 0;
          }
        }
      }
      .co-ul {
        li {
          width: 100%;
          // border: 1px solid #eeeeee;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
